<template>
  <border-box title="发布平台">
    <a-form-model>
      <a-form-model-item label="">
        <div v-for="(item,index) in platforms" :key="item.name">
          <a-checkbox :disabled="item.contentType!=contentType" class="check-item" v-model="item.checked">
            {{item.name}}
          </a-checkbox>
          <a-select :disabled="item.contentType!=contentType" v-if="item.options" class="select-item"
                    @change="change($event,index)" v-model="item.value">
            <a-select-option v-for="(option) in item.options" :value="option.id">{{option.platformName}}
            </a-select-option>
          </a-select>
        </div>
      </a-form-model-item>
    </a-form-model>
  </border-box>
</template>

<script>
  //权限设置
  import BorderBox from "./BorderBox";
  import {getAction} from "@/api/manage";

  export default {
    name: "publishPlatform",
    components: {BorderBox},
    props: ['contentType'],
    watch: {
      contentType: {
        immediate: true,
        handler: function () {
          this.platforms.forEach(item=>{
            item.checked = false;
            item.value = undefined;
            item.selectedOption = undefined;
          });
        }
      }
    },
    data() {
      return {
        platforms: [
          {
            name: '微信',
            checked: false,
            options: [],
            value: undefined,
            contentType: '1'
          },
          //微博
          {
            name: '微博',
            checked: false,
            options: [],
            value: undefined,
            contentType: '1'
          },
          //抖音
          {
            name: '抖音',
            checked: false,
            options: [],
            value: undefined,
            contentType: '2'
          },
          //头条
          {
            name: '头条',
            checked: false,
            options: [],
            value: undefined,
            contentType: '2'
          }
        ]
      }
    },
    created() {
      this.queryPlatformInfo();
    },
    methods: {
      //查询平台信息
      queryPlatformInfo() {
        getAction('base/basThirdInfo/list').then(res => {
          if (res.success) {
            res.result.records.forEach(item => {
              if (item.platformType == 1) {
                this.platforms[0].options.push(item)
              } else if (item.platformType == 2) {
                this.platforms[2].options.push(item)
              } else if (item.platformType == 3) {
                this.platforms[3].options.push(item)
              } else if (item.platformType == 4) {
                this.platforms[1].options.push(item)
              }
            })
          }
        })
      },
      getSelectedPlatform() {
        return this.platforms.filter(item => item.checked);
      },
      change(value, key) {
        const platform = this.platforms[key];
        if (platform) {
          const index = platform.options.findIndex(item => item.id == value);
          platform.selectedOption = platform.options[index];
        }
      }
    }
  }
</script>

<style scoped>
  .check-item {
    margin: 5px 0;
  }

  .select-item {
    margin-left: 20px;
    width: calc(100% - 30px);
  }

</style>